<template>
  <div class="w1200 appoint_page">
    <!-- 面包屑 开始 -->
    <div class="breadcrumb">
      <el-breadcrumb class="el_breadcrumb" separator-class="el-icon-arrow-right">
        <el-breadcrumb-item><nuxt-link to="/home">首页</nuxt-link></el-breadcrumb-item>
        <el-breadcrumb-item>{{ $cookies.get('city')||'全国' }}</el-breadcrumb-item>
        <el-breadcrumb-item>{{ $cookies.get('city')||'全国'  }}{{ bookName }}</el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <!-- 面包屑 end -->

    <div class="content mb20 mt20">
      <!-- 左侧内容 开始 -->
      <div class="left_box">
        <!-- 步骤条 开始 -->
        <div class="step_box">
          <div class="step active">
            <div class="inner">
              <span class="circle">1</span>
              <span class="txt">选择产品</span>
            </div>
          </div>
          <div class="step active">
            <div class="inner">
              <span class="circle">2</span>
              <span class="txt">填写与核对</span>
            </div>
          </div>
          <div class="step">
            <div class="inner">
              <span class="circle">3</span>
              <span class="txt">完成</span>
            </div>
          </div>
        </div>
        <!-- 步骤条 end -->

        <!-- 预约详情 开始 -->
        <div class="book_info">
          <div class="head">预约详情</div>

          <!-- 医院 开始 -->
          <div class="book_box" v-if="source == 'hospital'">
            <div class="avatar">
              <li-image :src="hospital.logo" class="img" />
            </div>
            <div class="info">
              <h2 class="h2">{{ hospital.name }}</h2>
              <h3 class="h3">
                <span>营业时间</span>
                <span>{{ hospital.businessTime }}</span>
              </h3>
              <div class="address">
                <span>所在位置</span>
                <span
                  >{{ hospital.provinceName }}{{ hospital.cityName
                  }}{{ hospital.districtName }}{{ hospital.address }}</span
                >
              </div>
            </div>
          </div>
          <!-- 医院 开始 -->

          <!-- 医生 开始 -->
          <div class="book_box" v-if="source == 'doctor'">
            <div class="avatar">
              <li-image :src="doctor.photo" class="img" />
            </div>
            <div class="info">
              <h2 class="h2"><span>{{ doctor.name }}</span><span class="sub">{{ doctor.personalTitle}}</span></h2>
              <h3 class="h3">从业年限{{doctor.workYears}}年</h3>
              <div class="address">{{ doctor.hospitalName }}</div>
            </div>
          </div>
          <!-- 医生 开始 -->

          <!-- 商品 开始 -->
          <div class="book_box" v-if="source == 'goods'">
            <div class="avatar g_avatar">
              <li-image :src="$getLogo(goods.goodsPics)" class="img" />
            </div>
            <div class="info">
              <h2 class="h2 goods_h2">
                <span class="name">{{ goods.goodsName }}</span>
                <div class="price_info">
                  <span class="num">x1</span>
                  <span class="price">￥{{ goods.sellPrice }}</span>
                </div>
              </h2>
              <h3 class="h3">{{hospitalName}}</h3>
              <div class="address">
                <span>所在位置</span>
                <span
                  >{{ goodsHosp.province }}{{ goodsHosp.city
                  }}{{ goodsHosp.district }}{{ goodsHosp.address }}</span
                >
              </div>
            </div>
          </div>
          <!-- 商品 开始 -->

        </div>
        <!-- 预约详情 end -->

        <!-- 个人信息 开始 -->
        <div class="book_info">
          <div class="head">个人信息</div>
          <div class="el_form_box">
            <el-form
              ref="form"
              :model="form"
              :rules="formRules"
              label-width="100px"
            >
              <el-form-item label="姓名" prop="name">
                <el-input
                  v-model="form.name"
                  class="a_input"
                  placeholder="请填写您的姓名"
                />
              </el-form-item>
              <el-form-item label="手机" prop="phone">
                <el-input
                  v-model="form.phone"
                  class="a_input"
                  placeholder="请填写您的联系方式"
                />
              </el-form-item>
              <el-form-item label="预约留言">
                <el-input
                  type="textarea"
                  v-model="form.leaveWord"
                  resize="none"
                  rows="5"
                  class="a_area"
                  placeholder="可备注您的口腔需求"
                />
              </el-form-item>
              <el-form-item label="" label-width="0">
                <div class="btn_box">
                  <el-button type="primary" class="btn" @click="checkParams"
                    >提交</el-button
                  >
                  <div class="tips">提交成功后将有客服人员与您联系</div>
                </div>
              </el-form-item>
            </el-form>
          </div>
        </div>
        <!-- 个人信息 end -->
      </div>
      <!-- 左侧内容 end -->

      <!-- 右侧内容 开始 -->
      <div class="right_box">
        <SettleIn />
      </div>
      <!-- 右侧内容 end -->
    </div>
  </div>
</template>
<script>
import SettleIn from "@/components/apply/settlein.vue";
import { Form, FormItem, Input } from "element-ui";
import { PHONE_VALIDATOR } from "@/utils/validator";
import { deepClone } from "@/utils/utils";
import {
  PLATFORM_TYPE,
  GET_HOSPITAL_INFO,
  GET_DOCTOR_INFO,
  SAVE_APPOINTMENT_INFO,
  GET_GOODS_INFO,
} from "@/http/interface";
export default {
  components: {
    [Form.name]: Form,
    [FormItem.name]: FormItem,
    [Input.name]: Input,
    SettleIn,
  },
  data() {
    return {
      source: this.$route.query.source,
      hospital: {},
      doctor: {},
      goods: {},
      form: {},
      formRules: {
        name: [{ required: true, message: "请填写您的姓名", trigger: "blur" }],
        phone: [
          { required: true, message: "请填写您的联系方式", trigger: "blur" },
          { validator: PHONE_VALIDATOR, trigger: "blur" },
        ],
      },
      goodsHosp:{},
      hospitalName:'',
      bookName:'医院'
    };
  },
  watchQuery: true,
  async asyncData({ query, $axios }) {
    let hospitalName = "";
    let hospital = {};
    let doctor = {};
    let goods = {};
    let params = { id: query.id };
    let goodsHosp = {}
    let bookName = '医院'

    // 医院
    if (query.source == "hospital" || query.hospitalId) {
      let res = await $axios.get(GET_HOSPITAL_INFO, {
        params: params,
      });
      let oInfo = res.data || {};
      hospital = oInfo.hospital || {};
      bookName = '医院'
    }

    // 医生
    if (query.source == "doctor") {
      let res = await $axios.get(GET_DOCTOR_INFO, {
        params: params,
      });
      doctor = res.data || {};
      bookName = '医生'
    }

    // 商品
    if (query.source == "goods") {
      let res = await $axios.get(GET_GOODS_INFO, {
        params: params,
      });
      goods = res.data || {};
      let o = (goods.hospitalList || []).find((k) => k.id == query.hospitalId);
      goodsHosp = o||{}
      hospitalName = o ? o.name : "";
      bookName = '商品'
    }
    console.log(hospital);

    return { hospital, doctor, goods, hospitalName,goodsHosp,bookName };
  },

  methods: {
    // 校验数据
    checkParams() {
      let _this = this;
      _this.$refs.form.validate((valid) => {
        if (!valid) {
          return false;
        }
        _this.saveInfo();
      });
    },

    // 提交数据
    async saveInfo() {
      let query = this.$route.query;
      let typesList = {
        hospital: "hospitalId",
        doctor: "doctorId",
        goods: "goodsId",
      };
      let idName = typesList[query.source];
      let o = deepClone(this.form);
      o[idName] = query.id;
      o.platform = PLATFORM_TYPE;
      if (query.hospitalId) {
        o.hospitalId = query.hospitalId;
      }
      console.log(o);
      let res = await this.$axios.post(SAVE_APPOINTMENT_INFO, o);
      if (res.code == 200) {
        this.$routerPush("/appoint/success")
      }
    },
  },
};
</script>
<style lang="less" scoped>
@import "/assets/styles/index/appoint/index.less";
</style>